[Day 19] 阿嬤都看得懂的盒模型

13th鐵人賽

Logos50607

團隊Web 實驗室

2021-10-04 01:40:35

1264 瀏覽

分享至

阿嬤都看得懂的盒模型

各位阿嬤，我們今天要來寄自己醃漬的醬瓜給乖孫。

我們找來 4 個紙盒，想在裡面各自放入 1 罐醬瓜。不過為了怕玻璃瓶在運送的過程中撞壞了，我們會先在紙盒中放入碎報紙，再把醬瓜罐放進去。接著，我們要把 4 個紙盒放進大的郵局紙箱中。同樣地，我們擔心紙盒在郵局紙箱中碰壞了，所以會在紙盒外面塞入保麗龍，讓這 4 個紙盒間，還有紙盒與郵局紙箱間，都保持些距離。

問題來了，如果我們的醬瓜罐是 100cm X 100 cm，那紙盒的尺寸會是多大呢？就算我們不放碎報紙，讓紙盒緊貼著醬瓜罐，這個紙盒有可能是 100cm X 100cm 嗎？不可能對吧？因為紙盒還是有厚度的，所以整個紙盒的寬度就會超過 100cm X 100cm。

我們曾經在介紹區塊樣式的時候，討論過 border (邊框) 這個屬性。這個邊框，就好像我們的紙盒，把我們的區塊給包起來。不知道各位阿嬤有沒有懷疑過一件事情，我的區塊在加上邊框之後，尺寸會不會維持原樣呢？還是會變胖了呢？我們可以來嘗試一下，把幾個區塊加上不同的邊框粗細，然後看看最後的結果。

我們先來想想，該怎麼製作同樣大小與背景顏色的區塊呢？沒錯，我們可以用類別的方式，把這些區塊的大小和背景顏色獨立寫出來。讓我們把這個類別叫做 "box"，並且把幾個區塊指定到這個類別吧：

<div class="box">區塊一</div>
<div class="box">區塊二</div>
<div class="box">區塊三</div>
<div class="box">區塊四</div>

小秘訣：輸入 .box*4，就可以產出 4 個類別為 "box" 的區塊元素囉～這個類別的樣式我們會這樣寫，非常直覺對吧：

.box{
  height:100px;
  width:100px;
  background-color:pink;
}

接下來，我們再把不同的區塊各自加上不同的樣式：

<div class="box">區塊一</div>
<div class="box" style="border: 10px orange solid">區塊二</div>
<div class="box" style="border: 20px orange solid">區塊三</div>
<div class="box" style="border: 30px orange solid">區塊四</div>

等等，這個加上樣式的方法也太不 DRY 了吧！讓我們想想可以怎麼把 border 這個樣式抽出來。還記得我們前面提到粉紅色的 gavagai 怎麼做嗎？沒錯，我們可以用行內樣式把類別的樣式蓋掉，所以我們的樣式和標籤會長這樣：

<div class="box">區塊一</div>
<div class="box" style="border-width: 10px">區塊二</div>
<div class="box" style="border-width: 20px">區塊三</div>
<div class="box" style="border-width: 30px">區塊四</div>

.box{
  height:100px;
  width:100px;
  background-color:pink;
  border: 0px orange solid;
}

不過，我們前面其實也有提到，我們其實不太喜歡寫行內樣式，而是喜歡將樣式都收整到 .css 檔中。所以，我們會把那些行內樣式也都寫成類別，並且在 .css 檔中指定這些類別的樣式。在 .css 檔中，通常越後面寫到的樣式，會覆蓋掉前面寫到的。因此，我們的結果就會長這樣：
https://codepen.io/LogosChen/pen/bGRwQWw

我們可以看見，所有區塊的粉紅色部分，大小都還是維持相同，但是邊框變寬以後，會把整個區塊撐大，所以就不再是 100px X 100px 這樣的尺寸大小了！覺得看不太清楚的阿嬤們，可以再次呼喚出發展者工具，選擇想觀察的區塊元素，然後點選底下的 Styles，再拉到最底下，就可以看見整個元素的詳細尺寸：

可以看見，整個區塊還是 100px X 100px，不過邊框 border 的部分，是 20px 寬。討論到這邊，阿嬤們應該會有 2 個問題：

圖片中的 padding 和 margin 是什麼？
那如果我想無論如何都固定區塊大小就是 100px X 100px，該怎麼辦呢？莫非要自己計算？

關於第一個問題，我們可以回想一下，在我們打包醬瓜的時候，在紙盒中放了碎報紙，讓醬瓜罐和紙盒盒壁保持距離，對吧？padding 其實就像是這些碎報紙，讓我們區塊中的內容物，和邊框之間，保持適當的距離。這個距離，因為是在區塊的邊框內部，中文通常翻成「內距」。

相反地，在紙盒外的保麗龍，是為了維持紙盒和其他紙盒，還有郵局紙箱間的距離。margin 就像是這些保麗龍，讓我們區塊的邊框，和其他區塊的邊框之間，保持適當的距離。同理，這個距離，中文通常翻成「外距」。

在剛剛的範例中，我們是不是會覺得每個區塊都黏在一起，而且裡面的文字都黏在邊框旁邊，看起來醜到爆炸呢？沒錯，讓我們塞點碎報紙和保麗龍進去吧！讓我們在 .box 類別中，把 margin 和 padding 都設成 10 px。

.box{
  height:100px;
  width:100px;
  background-color:pink;
  border: 0px orange solid;
  margin: 10px;
  padding: 10px;
}

這樣調整後，我們就讓區塊間，還有區塊邊框與內部的內容物，都保持適當間距囉！換句話說，我們的整個區塊分成 4 層，從外到內分別是：

margin 外距
border 邊框
padding 內距
內容物，英文叫作 content。
就像是我們寄醬瓜給乖孫那樣，我們用紙盒裡面放入碎報紙，和內容物醬瓜推個內距，在紙盒外面填滿保麗龍，和其他紙盒間推個外距，再加上紙盒本身邊框的寬度，決定了所有元件間的排版。這樣的排版模式，我們稱作「盒模型」。

上面第二個問題比較簡單，我們只要設定